<script setup>
import { ref, onMounted } from 'vue';
import { Navigation, Pagination } from 'swiper';
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import { homeBannerApi } from '@/api'

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
const modules = ref([Navigation, Pagination]);
const bannerList = ref([])
onMounted(() => {
  homeBannerApi({pos: 'home'}).then(res => {
    bannerList.value = res.banner;
  })
})
</script>

<template>
  <swiper :modules="modules" :slides-per-view="1" navigation pagination loop>
    <swiper-slide v-for="item in bannerList" :key="item.id">
      <img :src="item.pic" alt="">
    </swiper-slide>
  </swiper>
</template>

<style lang="scss" scoped>
.swiper {
  width: 100%;
  height: 220px;
  border-radius: 15px;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  &:hover :deep(.swiper-button-next), &:hover :deep(.swiper-button-prev) {
    display: flex !important;
  }
}
:deep(.swiper-pagination-bullet-active) {
  background: #fff;
}
:deep(.swiper-button-next), :deep(.swiper-button-prev) {
  width: 30px;
  height: 30px;
  color: #999;
  background: #fff;
  border-radius: 50%;
  display: none !important;
  &::after {
    font-size: 16px;
  }
}
</style>